.is-fullscreen {
  @apply h-full overflow-y-auto;
  @apply bg-light-50 dark:bg-dark-900;
}

// .markdown-anchor {
//   @apply p-4 pr-1 h-full border-r-2 border-r-light-500 dark:border-r-dark-300;
// }

.markdown-body {
  @apply min-w-0 py-4 px-7;

  // a.anchor {
  //   @apply absolute -ml-6 invisible;
  //   @apply text-dark-900 dark:text-light-900;

  //   span {
  //     @apply text-xl;
  //   }
  // }

  p {
    @apply mb-4;
  }

  img {
    @apply inline-block;
  }

  hr {
    @apply my-6 p-0 h-1 border-none bg-light-600 dark:bg-dark-200;
  }

  :deep(.code_wrap) {
    @apply relative;

    button[data-type='copy'] {
      @apply absolute invisible px-2 top-14px right-14px border-none rounded-md select-none z-10 text-xs;
      @apply bg-dark-50 bg-opacity-20 dark:(bg-light-50 bg-opacity-20) text-gray-500 dark:text-light-50;
    }

    &:hover {
      button[data-type='copy'] {
        @apply visible opacity-100;
      }
    }
  }

  * ~ h1,
  * ~ h2,
  * ~ h3,
  * ~ h4,
  * ~ h5,
  * ~ h6 {
    @apply mt-6;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply -ml-6 pl-6;

    &:hover {
      a.anchor {
        @apply visible;
      }
    }
  }

  table {
    @apply block w-max max-w-full overflow-auto;

    th,
    td {
      @apply px-3 py-1 border-1 border-dark-50 border-opacity-20 dark:(border-light-50 border-opacity-20);
    }
  }
}
